<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    表格的动态添加、删除
    <button>添加表格</button>
    <script>
        //表格的动态添加、删除
        var tab = document.createElement('table');
        //创建元素节点 标签为 table
        //createElement 创建节点
        tab.border = 1;
        //添加属性 属性名为border 属性值为1
        document.body.appendChild(tab);
        //将table追加到父节点body下
        //appendChild 将节点追加到父元素的最后
        var id = 1;
        document.querySelector('button').onclick = function () {
        //得到页面的button，并为其添加点击事件
        //querySelect 得到页面上符合选择器的第一个节点
        //onclick 点击事件
            var tr = document.createElement('tr');
            //创建元素节点 标签为 tr
            tab.appendChild(tr);
            //将tr追加到父节点table的最后    
            var td1 = document.createElement('td');
            //创建第一个td节点 标签为td
            td1.innerHTML = id  
            //用innerHTML属性把id放到td1标签的内容
            var td2 = document.createElement('td')
            //创建第二个td节点，标签为td
            tr.appendChild(td1)
            tr.appendChild(td2)
            //分别将td1、td2追加到父节点tr的后面
            var btn = document.createElement('button');
            //创建节点 标签为 button
            btn.innerHTML = '删除'
            //button标签里的内容为 删除
            td2.appendChild(btn)
            //把button追加到父节点td2的最后
            btn.onclick = function () {//点击事件
                tab.removeChild(this.parentNode.parentNode);
                //在点击删除按钮的时候，将按钮所在位置的tr删除
                //this.parentNode 找到的是td2 找的是父节点
                //this.parentNode.parentNode 找到的是tr
            }
            id++;
        }
    </script>
</body>
</html>
